<template>
  <div>
    {{ person }}
    <button @click="person.age++">加</button>
  </div>
</template>

<script lang="ts">
 import { defineComponent } from 'vue'
  export default  defineComponent({
    name:'App'
  })
</script>
<script lang="ts" setup>
import {reactive} from 'vue'
  /* 
  reactive()
    - 返回一个对象的响应式代理
    - 响应式转换是“深层”的：它会影响到所有嵌套的属性
    - reactive只能接受对象类型的数据

*/

interface personType{
  name:string,
  age:number
}
const person=reactive<personType>({
  name:"xiaoli",
  age:18
})
</script>

<style lang="less" scoped>
  
</style>